<template>
	<view class="container">
		<!-- 头部用户区域 -->
		<view class="header">
			<view class="left">
				<view class="userImg">
					<image :src="userInfo.avatar" style="width: 48rpx;height: 48rpx;border-radius: 100%">
					</image>
				</view>
				<view class="userName" style="margin-left:10rpx;">{{userInfo.nickName}}</view>
				<image src="https://app.zbzedu.com/static/WaChat/img/guanfang.png" mode="" style="height: 32rpx;width: 68rpx;margin-left: 10rpx;"></image>
			</view>
			<view class="right">
				<u-icon name="more-dot-fill" @click="clickMore" color="rgba(4, 4, 4, 0.5)" size="36"></u-icon>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="main" @click="toDetail">
			<view class="u-flex"  @click="toDetails(infoData)" v-show="showType">
				<view class="u-flex u-p-l-22 u-p-r-22 huati-wrp u-p-t-10 u-p-b-10">
					<view class="huati u-m-r-8">
						<u-icon :name="require('../../../static/icon/forum/huati.png')" size="32"></u-icon>
					</view>
					<view class="u-font-28 color-active">{{infoData.diaryType}}</view>
				</view>
			</view>
			<view class="content color-16 u-font-28 u-m-t-16 u-m-b-16">
				<text>{{infoData.diaryDesc}}</text>
			</view>
			<!-- 单张图片显示模式 -->
			<view class="singImg" v-if="infoData.fileList.length === 1">
				<image :src="item.fileUrl" mode="aspectFill" v-for="item in infoData.fileList"></image>
			</view>
			<!-- 多张图片显示模式 -->
			<view class="singImg imgs u-flex flex-between u-flex-wrap" v-if="infoData.fileList.length>1">
				<image :src="item.fileUrl" mode="aspectFill" v-for="item in infoData.fileList"></image>
			</view>
		</view>
		<!-- 底部区域 -->
		<view class="u-p-t-24 u-p-b-24 u-font-20" style="color: rgba(4, 4, 4, .38)" v-show="showTime">
		  <text class="u-m-r-8">{{ infoData.createTime && infoData.createTime.split(' ')[0]  }}</text>
		</view>
		<view class="tool-bar u-flex u-m-t-30 u-p-b-20" v-show="showFooter">
			<button style="background: transparent;color: #101010;font-size: 28upx" class="button-row" id="shareBtn"
				open-type="share" type="primary">
				<view class="u-flex flex-center">
					<u-icon :name="require('../../../static/icon/share.png')" color="#888" size="36" class="u-m-r-10">
					</u-icon>
					<span>分享</span>
				</view>
			</button>
			<view class="u-flex-1 u-text-right u-flex" style="flex-direction: row-reverse">
				<view class="item-bar u-flex flex-center" @click.stop="like">
					<u-icon :name="infoData.likeFlag ? require('../../../static/icon/liked.png') : require('../../../static/icon/like.png')"
					        size="36" class="u-m-r-10"></u-icon>
					<span :class="{'color-active': infoData.likeFlag }">{{infoData.likeNum ? infoData.likeNum : '点赞'}}</span>
				</view>
				<view class="item-bar u-flex flex-center u-m-r-20" @click.stop="toAddComment(infoData)">
					<u-icon :name="require('../../../static/icon/env.png')" color="#888" size="36" class="u-m-r-10"></u-icon>
					<span>{{infoData.commentNum || '回复'}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			userInfo:Object,
			infoData:Object,
			showType:{
				type:Boolean,
				default:true
			},
			showFooter:{
				type:Boolean,
				default:true
			},
			showTime:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				recommendList: [{
						name: "推荐"
					},
					{
						name: "最新"
					},
					{
						name: "关注"
					}
				],
				current: 0,
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url:"/pages/discussion/discussionDetail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		border-bottom: 1rpx solid #C0C0C0;
		padding: 0 30rpx;

		.header {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;
			}
		}

		.content {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-indent: 2rem;
		}

		.singImg image {
			width: 494rpx;
			height: 282rpx;
			border-radius: 12rpx;
		}

		.imgs image {
			width: 216rpx;
			height: 216rpx;
			border-radius: 12rpx;
		}
	}

	.button-row {
		padding-left: 0;
	}

	.button-row::after {
		content: "";
		border: none;
	}
	.huati-wrp {
	  background-color: rgba(4, 4, 4, 0.08);
	  border-radius: 26rpx;
	}
	.huati {
	  width: 32rpx;
	  height: 32rpx;
	  border-radius: 100%;
	  background: $btn_active_bg_color;
	  color: #fff;
	  text-align: center;
	}
</style>
